As you can see the text does not flow nicely around it. But at least we have the image into our web page.Images are very important to a good looking website. I prefer to use Photoshop for editing of images, and I don't like to over-automate image use. But anyway it's good to be familiar with the image capabilities of Dreamweaver.
The general html commands for an image is
<img src="filename">
Where filename can be the name of a file, or a URL to a picture that is available online.
We can also resize the image using the height and width options, and we can float it left or right, if we want text to wrap around it.
For example, here's a 200 x 200 pixel image:
<img src="filename" height=200 width=200>
Dreamweaver offers a couple of helpful capabilites, allowing you to resize and crop images, and also, to edit them to photoshop.
This chapter also describes the use of "bridge" which is an Adobe product I personally don't use.
Raster images means images that are made of lists of pixels. Each pixel has a color. In it's simplest form a raster image file is simply a list of each pixel and what color it is. However, those files get pretty big so most pictures have some kind of compression. The most common are gif, which uses run length encoding to compress repeated colors, and jpg, which uses a mathematical formula to compress the images (Laplace Transform). JPG files are best in most situations for photos, while give files may be nice for block colors or simple graphics. PNG files are similar to JPG files.
Vector graphics are basically outline images. The image file consists of a list of points, and the program connects the dots and fills them in. The advantage of these is that they can get bigger or smaller and the edges stay smooth. There is no jaggy edges as you would find when you zoom in on a pixel based image such as a jpg or png file.
There are many other image types, such as BMP and TIFF files, or PSD photoshop files, but web pages can't use them. If you want to use files of some other type besides jpg, gif or png, you should use Photoshop to convert them.
HTML doesn't handle vector images, they need to be "rasterized" which means converted to pixel images. I usually do this in Photoshop.
It's very easy. From te file menu select Insert -> Image and then select the image you want to insert.
Page 196: The book starts with the files from chapter 8, but if you didn't do Chapter 8, there is a file called "contactus.html" you can use in the Lesson 9 folder.
If you don't have the lessons from the book, create a new page called "contactus.html" using the Adobe template "2 column fixed, header and footer." in the content area insert four paragraphs of text with the folling titles" "Contact meridien GreenStart", Association Management, Education and events", "Transportation Analysis", "Research and Development" and "Information Systems". You will also need images called biking.jpg, elaine.jpg.
Page 197: Replace the image placeholder in the left sidebar menu area, with the image "biking.jpg" by double clicking the placeholder, then replace with the image you want. Set the alternate text to "Bike to work to save gas". Replace the caption text with "We practice what we preach. Here's Lin biking to work through Lakefront Park."
If you don't have the lesson files, you will need to find an appropriate picture and insert it in the right spot. The size should be 150x150. Add a caption.
Page 198: Dreamweaver will help you keep a list of your images, which it considers to be "assets" and will be found in the assets panel. This is a tab in the same window where you find the list of files.
Click at the beginning of the text about "Association Management". We're going to insert an image here. Scan the list of "assets" and find "elaine.jpg". When you are done, you will see the image but the text will not float around the image.
I'm going to do the same thing in this document. I'm going to insert an image called "penguin". As you can see the text does not flow nicely around it. But at least we have the image into our web page.
Page 199: you can set the alignment of an image using the the html alignment option, or by setting a css rule.
Select the image "elaine.jpg" and then from the Properties panel selec Align -> Right. The image will move right and text will flow around it.
I'm going to do the same thing here with my penguin image. You can see it on the right side of this page.
When you have observed how this works, set the alignment back to "none" so we can try this another way.
You can set the float property in a css rule. For example you could create a rule called "#floatmeright".
Create a new rule like this vy openning the CSS window (if not already open) and then net style (the "+" button found at the bottom of the rules pane), create a rule called "floatmeright", and then create a rule by selecting box->float -> right, and then ok to save. Make sure the id of your object matches the name of your new rule. The text should now wrap around the image.
Here's the html:
<img src="penguin.jpg" id=floatmeright alt="second penguin image">
And here is the corresponding CSS rule
<style type="text/css">
<!--
#floatmeright {
float: right;
}
-->
</style>